Controller-View 畫面測試

再我們加上任何其他功能或是造型之前，我們先來寫一些測試。
與之前 Context 的測試一樣，在 test 資料夾裡面建立一個相對應的測試檔：

建立 test/gratitude_web/controllers/note_controller_test.exs 檔案：

defmodule GratitudeWeb.NoteControllerTest do
  use GratitudeWeb.ConnCase

  # 準備在這邊加入測試
end

在這邊我們使用 describe 來區分要測試的 controller 函式，並且使用 test 來測試這個函式的各項行為。

我們現在有的 index 函式相對單純，只需要測試有沒有把所有的 note 顯示在畫面即可，
因此在這個測試我們要做的事情有：

1. 建立兩個 note
2. 要求 /notes 的畫面結果
3. 確認頁面上有兩個 note 的內容

defmodule GratitudeWeb.NoteControllerTest do
  use GratitudeWeb.ConnCase
  alias Gratitude.Notes

  describe "index" do
    test "lists all notes", %{conn: conn} do
      {:ok, note1} = Notes.create_note(%{content: "筆記內容1"})
      {:ok, note2} = Notes.create_note(%{content: "筆記內容2"})

      conn = get(conn, ~p"/notes")

      assert html_response(conn, 200) =~ note1.content
      assert html_response(conn, 200) =~ note2.content
    end
  end
end

Kernel.=~/2 函式可以檢查右邊的字串是不是包含在左邊裡面，如：

"abcd" =~ "bc"
#=> true

這個函式在測試時常常用到，我們得到畫面的 html 字串後，直接拿來檢查我們想要顯示的項目有沒有在裡面。

踩坑筆記：如果顯示的內容有可能轉成 html 格式，如 < 會變成 <，這時候可以使用 Plug.HTML.html_escape/1 來包裝檢查目標，讓測試可以正確比對。如：

assert html_response(conn, 200) =~ Plug.HTML.html_escape(note1.content)

執行測試，我們一樣可以使用檔案的 path 與行數來執行單個測試：

mix test test/gratitude_web/controllers/note_controller_test.exs:10

Finished in 0.07 seconds (0.00s async, 0.07s sync)
1 test, 0 failures

確定了資料顯示無誤之後，我們可以開始裝飾畫面了。